<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="../bootstrap-3.3.7-dist/js/jquery.js"></script>
    <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.css">
    <script src="../bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <!-- <script src="../bootstrap-3.3.7-dist/js/npm.js"></script> -->
    <script src="vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div class="container" id="box">
        <form role="form" >
            <div class="form-group">
                <label for="username">用户名：</label>
                <input type="username"  class="form-control" v-model="username">
            </div>
            <div class="form-group">
                    <label for="password">密码：</label>
                    <input type="password"  class="form-control" v-model="password">
            </div>
            <button class="btn btn-info" @click.prevent ="add()">提交</button>
            <button class="btn btn-danger">重置</button>
        </form>
        <hr>
        <table class="table table-hover table-bordered ">
            <caption class="h2 text-center" >用户信息表</caption>
            <tr class="active">
                <th class="text-center">序号</th>
                <th class="text-center">姓名</th>
                <th class="text-center">密码</th>
                <th class="text-center">备注</th>
            </tr>
            <tr class="text-center text-info" v-for="(item, index) in arr">
                   <td>{{index+1}}</td>
                   <td>{{item.name}}</td>
                   <td>{{item.pwd}}</td>
                   <td><button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer" @click="nowIndex=index">删除</button></td>
            </tr>
            <tr v-show="arr.length != 0">
                <td colspan="4" class="text-right">
                    <button class="btn btn-danger btn-sm" type="button" @click="nowIndex=-4" data-toggle="modal" data-target="#layer">全部删除</button>
                </td>
            </tr>
            <tr v-show="arr.length == 0">
                <td colspan="4" class="text-center text-muted">
                    <p>.....暂无数据.....</p>
                </td>
            </tr>
        </table>
        <!-- 模态框 -->
        <div class="modal fade" role="dialog" id="layer" aria-labelledby="layerLabel"  tabindex="-1" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="layerLabel">提示</h4>
                    </div>
                    <div class="modal-body" >
                            您确定<span v-if="nowIndex=-4">全部</span>删除吗？
                    </div>
                    <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <button type="button" class="btn btn-primary"  @click='del(nowIndex)'>确认</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- <h1>{{arr}}</h1> -->
    </div>
    <script>
    var box = new Vue({
        el:'#box',
        data:{
            arr:[],
            username:"",
            password:"",
            nowIndex:-10
        },
        methods:{
                add:function(){
                    console.log(this.username);
                    this.arr.push({
                        name:this.username,
                        pwd:this.password
                    });
                    this.username="";
                    this.password="";
                    
                },
                del:function(n) {
                    if(n == -4){
                        this.arr=[];
                    }else{
                        this.arr.splice(n,1);
                    }
                }
            }
    });
    </script>
    <!-- <div id="box">
        <input type="text" v-model="message">
        <button v-on:click="btn()">按钮</button>
        <h1  v-show="a">{{message}}</h1>
    </div>
    <script>
    var myApp = new Vue({
        el:"#box",
        data:{
              message:"what are you 弄啥嘞",
              a:true
        },
        methods:{
            btn:function(){
                 this.a=!this.a;
            },
        },
    })
    </script> -->
</body>
</html>